{extend name="./_content" }
{block name='mid'}
	<div class="jumbotron">
		<div class="container">
			<h1>注册</h1>
			<p>注册您的账号</p>
			<p>
				<a class="btn btn-primary btn-lg" id="btn_register">注册</a>
			</p>
		</div>
	</div>
	<div class="well">
        <form action="  " method="POST" class="form-horizontal" role="form" id="register">
            <div class="form-group">
                <label class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="name" name="name" placeholder="输入姓名" required data-bv-notempty-message="姓名不能为空" pattern="^.{2,10}$" data-bv-regexp-message="姓名在两到十个字之间"	/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">昵称</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="nick" name="nick" placeholder="输入昵称" required data-bv-notempty-message="昵称不能为空" pattern="^.{2,10}$" data-bv-regexp-message="昵称在两到十个字之间"	/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">地址</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="address" name="address" placeholder="输入地址" required data-bv-notempty-message="地址不能为空" pattern="^.{10,100}$" data-bv-regexp-message="地址在十到一百个字之间"	/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">密码</label>
                <div class="col-sm-8">
                    <input type="password" name="password" required class="form-control" id="password" placeholder="输入密码"
                data-bv-notempty-message="密码不能为空"
                data-bv-different="true" data-bv-different-field="name" data-bv-different-message="密码不能和用户名一样" pattern="^.{6,15}$" data-bv-regexp-message="密码在六位到十五位之间"	/>
                </div>
                </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">确认密码</label>
                <div class="col-sm-8">
                    <input type="password" name="password1" required class="form-control" id="password1" placeholder="确认密码"
                    data-bv-notempty-message="密码不能为空"
                    data-bv-identical="true" data-bv-identical-field="password" data-bv-identical-message="两次输入的密码不一样"/>
                </div>
            </div>
        </form>
	</div>
	<script type="text/javascript">
        $(function () {
			view.init();
		});
		let view = {
			init:function () {
				$('#register').bootstrapValidator({
				    message: 'This value is not valid',
				    feedbackIcons: {
				    	valid: 'glyphicon glyphicon-ok',
				    	invalid: 'glyphicon glyphicon-remove',
				    	validating: 'glyphicon glyphicon-refresh'
				    },fields:{
                        name:{
                            validators:{
                                threshold:2,//有2字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，2字符以上才开始）
                                remote: {
                                    //ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                                    url: '/index/user/user_exist',//验证地址
                                    message: '用户已存在',//提示消息
                                    delay :  1000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置1秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                                    type: 'POST',//请求方式
                                }
                            }
                        }
                    }
				});
				$('#btn_register').on('click',this.btn_register);
				$('#register').on('submit',function () {
                    return false;
                });
			},
			btn_register:function () {
				$('#register').data('bootstrapValidator').validate();
				var b = $('#register').data('bootstrapValidator').isValid();
				if(!b){
					return false;
				}
				$('#btn_register').attr('disabled','disabld');
				$.ajax({
					url: '/index/user/register',
					type: 'post',
					dataType: 'json',
					data: $('#register').serialize(),
				})
				.done(function(data){
				    if(data.status === 1){
				        alert(data.msg);
                        wpgaci.goUrl('/index/user',0);
					}else{
                        alert(data.msg);
                        $('#btn_register').removeAttr('disabled');
					}
				})
				.fail(function() {
					console.log("error");
                    $('#btn_register').removeAttr('disabled');
				});
			}
		};
	</script>
{/block}